import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { Stack, useRouter } from "expo-router";
import React, { useState } from "react";
import { Alert, FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function MemberCardListScreen() {
  const navigation = useNavigation();
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const [visible, setVisible] = useState<boolean>(false);

  const [cards, setCards] = useState([
    {
      id: "1",
      name: "黄金年卡",
      type: "年卡",
      price: 299,
      days: 365,
      image: "https://picsum.photos/400/200?1",
    },
    {
      id: "2",
      name: "白银季卡",
      type: "季卡",
      price: 99,
      days: 90,
      image: "https://picsum.photos/400/200?2",
    },
    {
      id: "3",
      name: "体验次数卡",
      type: "次数卡",
      price: 59,
      days: 10,
      image: "https://picsum.photos/400/200?3",
    },
  ]);

  const handleDelete = (id: string) => {
    Alert.alert("确认删除", "确定要删除该会员卡吗？", [
      { text: "取消", style: "cancel" },
      {
        text: "删除",
        style: "destructive",
        onPress: () => setCards(cards.filter((c) => c.id !== id)),
      },
    ]);
  };

  const handleEdit = (card: any) => {
    Alert.alert("编辑功能", `你点击了编辑「${card.name}」`);
    // 可跳转到添加会员卡页面并传入参数
    // navigation.navigate("AddMemberCard", { card });
  };

  const renderItem = ({ item }: { item: any }) => (
    <View
      style={{
        backgroundColor: "#fff",
        borderRadius: 12,
        marginBottom: 16,
        overflow: "hidden",
        shadowColor: "#000",
        shadowOpacity: 0.05,
        shadowRadius: 6,
        elevation: 2,
      }}
    >
      <Image source={{ uri: item.image }} style={{ width: "100%", height: 150 }} resizeMode="cover" />
      <View style={{ padding: 12 }}>
        <Text style={{ fontSize: 18, fontWeight: "bold", marginBottom: 4 }}>{item.name}</Text>
        <Text style={{ color: "#666", marginBottom: 8 }}>
          类型：{item.type}　{item.type === "次数卡" ? `可使用 ${item.days} 次` : `有效期 ${item.days} 天`}
        </Text>
        <Text style={{ fontSize: 16, color: "#FF6A00", fontWeight: "bold", marginBottom: 12 }}>
          ￥{item.price}
        </Text>

        <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
          <TouchableOpacity
            onPress={() => handleEdit(item)}
            style={{
              backgroundColor: "#eee",
              paddingVertical: 6,
              paddingHorizontal: 16,
              borderRadius: 20,
              marginRight: 10,
            }}
          >
            <Text>编辑</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => handleDelete(item.id)}
            style={{
              backgroundColor: "#FF6A00",
              paddingVertical: 6,
              paddingHorizontal: 16,
              borderRadius: 20,
            }}
          >
            <Text style={{ color: "#fff" }}>删除</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );

  return (
    <View style={{ flex: 1, backgroundColor: "#F5F5F5", marginBottom: insets.bottom }}>
      <Stack.Screen
        options={{
          headerTitle: () => (
            <TouchableOpacity onPress={() => {
              setVisible(true);
            }}>
              <Text style={styles.headerStoreText}>{"测试"} ▼</Text>
            </TouchableOpacity>
          ),
          headerRight: () => (
            <TouchableOpacity
              onPress={() => {
                router.push("/pages/AddMemberCardScreen");
              }}
            >
              <Ionicons name="add" size={26} style={{ marginRight: 12 }} />
            </TouchableOpacity>
          ),
        }}
      ></Stack.Screen>

      <FlatList
        data={cards}
        keyExtractor={(item) => item.id}
        renderItem={renderItem}
        contentContainerStyle={{ padding: 16, paddingBottom: 100 }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  headerStoreText: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
})